<template>
  <div class="cartNumber">
    <div class="num">
      <div class="num-z">
        <button type="button" class="num-f" @click="reduce()">-</button>
        <input type="number" ref="num" readonly :value="initcount" />
        <button type="button" class="num-z" @click="plus()">+</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cartNumber",
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    this.num = this.$refs.num.value;
  },
  methods: {
    plus() {
      this.num = this.$refs.num.value = parseInt(this.$refs.num.value) + 1;
    },
    reduce() {
      if (this.$refs.num.value <= 1) {
        this.num = this.$refs.num.value = 1;
      } else {
        this.num = this.$refs.num.value = this.$refs.num.value - 1;
      }
    }
  },
  props: ["initcount", "goodsid"],
  watch: {
    num(newVal) {
      // 数量改变做处理
      this.$store.commit("updateGoodsCount", {id: this.goodsid, count: newVal})
    },
    stock_quantity(newVal) {
      // stock_quantity的值是异步加载的，需要监听加载之后的值，把值传给参数,现在不是异步加载，所以目前没有用
      // console.log(newVal+1)
    }
  }
};
</script>

<style lang="scss" scoped>
.cartNumber {
  display: inline-block;
  margin: 0 8px 0 8px;
  .num {
    .num-z {
      display: inline-block;
      border: 1px solid #bbb;
      border-radius: 6px;
      button {
        width: 40px;
        height: 24px;
        background: #f9f9f9;
        border: none;
        outline: none;
        border-radius: 6px;
        margin: 0;
        &:active {
          background: #bbb;
        }
      }
      input {
        outline: none;
        width: 38px;
        height: 22px;
        border: #bbb;
        text-align: center;
      }
    }
  }
}
</style>